GitHub
*THE* Static Site
Generator
for Dart
  GitHub
Copy static assets
Directly copy images, fonts, HTML, CSS, and JavaScript from your source set to your final website build.
void main() {
  final staticShock = StaticShock()
    ..pick(DirectoryPicker.parse('images'))
    ..pick(DirectoryPicker.parse('fonts'))
    ..pick(FilePicker.parse('favicon.ico'));

  staticShock.generateWebsite();
}
Copy static assets
Directly copy images, fonts, HTML, CSS, and JavaScript from your source set to your final website build.
void main() {
  final staticShock = StaticShock()
    ..pick(DirectoryPicker.parse('images'))
    ..pick(DirectoryPicker.parse('fonts'))
    ..pick(FilePicker.parse('favicon.ico'));

  staticShock.generateWebsite();
}
Add plugins
Select features that you want to add, like Markdown, Jinja templates, and pretty URLs.
void main() {
  final staticShock = StaticShock()
    ..plugin(const MarkdownPlugin())
    ..plugin(const JinjaPlugin())
    ..plugin(const PrettyUrlsPlugin())
    ..plugin(const SassPlugin());

  staticShock.generateWebsite();
}
Add plugins
Select features that you want to add, like Markdown, Jinja templates, and pretty URLs.
void main() {
  final staticShock = StaticShock()
    ..plugin(const MarkdownPlugin())
    ..plugin(const JinjaPlugin())
    ..plugin(const PrettyUrlsPlugin())
    ..plugin(const SassPlugin());

  staticShock.generateWebsite();
}
Write articles with Markdown
Enjoy the ease of writing with Markdown. Specify your desired layout, title, URL, and tags with Front Matter.
---
title: Quickstart
---

Static Shock is a static site generator, written in Dart.

To get started, activate the Static Shock command-line interface on your computer:

    dart pub global activate static_shock_cli

Create a new static website project:

    shock create
Write articles with Markdown
Enjoy the ease of writing with Markdown. Specify your desired layout, title, URL, and tags with Front Matter.
---
title: Quickstart
---

Static Shock is a static site generator, written in Dart.

To get started, activate the Static Shock command-line interface on your computer:

    dart pub global activate static_shock_cli

Create a new static website project:

    shock create
Compose layouts with Jinja templates
Insert values, insert content, and loop through pages, with the Jinja templates plugin.
<html>
 <head>
   <title>{{ title }}</title>
 </head>
 <body>
   {{ content }}
 </body>
</html>
Compose layouts with Jinja templates
Insert values, insert content, and loop through pages, with the Jinja templates plugin.
<html>
 <head>
   <title>{{ title }}</title>
 </head>
 <body>
   {{ content }}
 </body>
</html>
Compile Sass to CSS
Save time by writing Sass, and then compile that Sass to CSS in your final website build, using the Sass plugin.
#header {
  .branding {
    .title {
      color: WHITE;
      font-weight: bold;
    }
  }
}
Compile Sass to CSS
Save time by writing Sass, and then compile that Sass to CSS in your final website build, using the Sass plugin.
#header {
  .branding {
    .title {
      color: WHITE;
      font-weight: bold;
    }
  }
}

Showcase

Websites generated with Static Shock.

Documentation Websites

Contributors

Built by the following contributors.